<template>
  <div>
    <CyclicRolling :options="options" :step="50" :num="6" />

    <a-button color="success">成功按钮</a-button>
    <a-button color="error">错误按钮</a-button>
    <a-button color="warning" @click="openM">警告按钮</a-button>

    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary"> 操作按钮 </a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '删除',
              icon: 'ic:outline-delete-outline',
              onClick: handleDelete.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>

    <!-- <BasicModal v-bind="$attrs" title="Modal Title" @register="registerModal">
      Modal Info.
    </BasicModal> -->
  </div>
</template>
<script lang="ts" setup>
  // ----------------------------- 第三方引入 -----------------------------
  import { ref, onMounted } from 'vue';

  // ----------------------------- hooks -----------------------------
  import { batchConfirm } from '/@/jv_package/components/AuditController/src/index';
  // ----------------------------- 组件 -----------------------------
  // import { BasicModal, useModal } from '/@/components/Modal';
  import { BasicTable, TableAction, useTable } from '/@/components/Table';
  import CyclicRolling from '/@/components/CyclicRolling/index.vue';
  // ----------------------------- 其他引入 -----------------------------
  import SaleOrderApi from '/@/api/work/sale/order';
  import { columns } from './test.data';
  // import { setCustomCell } from '/@/jv_package/utils/help/setCustomCell';

  //----------------------------- 变量声明区 -----------------------------

  // 加载数据
  function fetchData() {
    let list: Array<object> = [
      {
        Id: 20,
        BillGui: '1673902628985110529',
        ItemId: 'ZJ005',
        ItemName: '外星人机箱',
        Description: '80*80',
        Unit: 'cm',
        Quantity: 100000,
        Price: 10000,
        Amount: 1000000000,
        Tax: 0.5,
        TDA: 666666666.6667,
        AuxiliaryQty: 0,
        AuxiliaryPrice: 0,
        Remarks: null,
        AssociatedNo: 0,
        NoTaxPrice: 0,
        StockInQuantity: 0,
        ReturnQuantity: 0,
        ItemIndex: 1,
      },
      {
        Id: 20,
        BillGui: '1673902628985110529',
        ItemId: 'ZJ005',
        ItemName: '外星人机箱',
        Description: '100*100',
        Unit: 'cm',
        Quantity: 100000,
        Price: 10000,
        Amount: 1000000000,
        Tax: 0.5,
        TDA: 666666666.6667,
        AuxiliaryQty: 0,
        AuxiliaryPrice: 0,
        Remarks: null,
        AssociatedNo: 0,
        NoTaxPrice: 0,
        StockInQuantity: 0,
        ReturnQuantity: 0,
        ItemIndex: 1,
      },
      {
        Id: 20,
        BillGui: '1673902628985110529',
        ItemId: 'ZJ005',
        ItemName: '外星人机箱',
        Description: '120*120',
        Unit: 'cm',
        Quantity: 100000,
        Price: 10000,
        Amount: 1000000000,
        Tax: 0.5,
        TDA: 666666666.6667,
        AuxiliaryQty: 0,
        AuxiliaryPrice: 0,
        Remarks: null,
        AssociatedNo: 0,
        NoTaxPrice: 0,
        StockInQuantity: 0,
        ReturnQuantity: 0,
        ItemIndex: 1,
      },
      {
        Id: 20,
        BillGui: '1673902628985110529',
        ItemId: 'ZJ009',
        ItemName: '外星人笔记本',
        Description: '120*120',
        Unit: 'cm',
        Quantity: 100000,
        Price: 10000,
        Amount: 1000000000,
        Tax: 0.5,
        TDA: 666666666.6667,
        AuxiliaryQty: 0,
        AuxiliaryPrice: 0,
        Remarks: null,
        AssociatedNo: 0,
        NoTaxPrice: 0,
        StockInQuantity: 0,
        ReturnQuantity: 0,
        ItemIndex: 1,
      },
      {
        Id: 20,
        BillGui: '1673902628985110529',
        ItemId: 'ZJ019',
        ItemName: '外星人笔记本',
        Description: '120*120',
        Unit: 'cm',
        Quantity: 100000,
        Price: 10000,
        Amount: 1000000000,
        Tax: 0.5,
        TDA: 666666666.6667,
        AuxiliaryQty: 0,
        AuxiliaryPrice: 0,
        Remarks: null,
        AssociatedNo: 0,
        NoTaxPrice: 0,
        StockInQuantity: 0,
        ReturnQuantity: 0,
        ItemIndex: 1,
      },
      {
        Id: 20,
        BillGui: '1673902628985110529',
        ItemId: 'ZJ019',
        ItemName: '外星人笔记本',
        Description: '140*140',
        Unit: 'cm',
        Quantity: 100000,
        Price: 10000,
        Amount: 1000000000,
        Tax: 0.5,
        TDA: 666666666.6667,
        AuxiliaryQty: 0,
        AuxiliaryPrice: 0,
        Remarks: null,
        AssociatedNo: 0,
        NoTaxPrice: 0,
        StockInQuantity: 0,
        ReturnQuantity: 0,
        ItemIndex: 1,
      },
    ];
    setTableData(list);
    setTimeout(() => {
      setColumns(columns(getDataSource()));
    }, 300);
  }

  const [registerTable, { getDataSource, setTableData, setColumns }] = useTable({
    title: 'TableAction组件及固定列示例',
    // columns: [],
    bordered: true,
    actionColumn: {
      width: 250,
      title: 'Action',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
    // autoCreateKey: false,
  });

  const options = ref({
    tabelTitle: [
      {
        label: 'BillId',
        name: 'commonField.BillId',
      },
      {
        label: 'State',
        name: 'common.state',
      },
      {
        label: 'CreationDate',
        name: 'commonField.CreationDate',
      },
      {
        label: 'Creator',
        name: 'commonField.Creator',
      },
      {
        label: 'CustomerName',
        name: 'commonField.CustomerName',
      },
    ],
    api: SaleOrderApi.api_list,
  });
  enum Direction {
    NORTH = 'east',
    SOUTH = 2,
    EAST,
    WEST,
  }
  console.log('dir::: ', Direction['EAST']);
  console.log('dir::: ', Direction);
  interface __Object {
    name: string;
    age: number;
  }
  const _Object = {
    name: '陈旭',
    age: 520,
  };
  console.log('_Object::: ', _Object as __Object);
  // const [registerModal, modalActions] = useModal();
  // ----------------------------- hooks使用区 -----------------------------

  // ----------------------------- 钩子函数区 -----------------------------
  onMounted(() => {
    fetchData();
  });
  //  ----------------------------- 自定义方法区 -----------------------------
  function handleDelete(record: Recordable) {
    console.log('点击了删除', record);
  }
  function openM() {
    batchConfirm('该单据中已有部分或全部物料发货完成，是否继续操作？', () => {
      console.log(12312321);
    });
    // modalActions.setModalProps({
    //   okType: 'danger',
    // });
    // // modalActions.confirm();
    // modalActions.openModal(true, {});
  }
</script>
<style lang="less" scoped></style>
